<template>
    <div class="detail_l">
        <div class="detail_t">
            <div class="cnt">
                <div class="header">
                    <img :src="program.coverUrl" alt="">
                    <i class="mask"></i>
                </div>
                <div class="info">
                    <div class="title">
                        <i class="program"></i>
                        <h2>{{ program.name }}</h2>
                    </div>
                    <div class="name">
                        <i class="icon"></i>
                        <span>{{ dj.brand }}</span>
                    </div>
                    <div class="btn">
                        <div class="btn_l">
                            <span>订阅({{ program.duration }})</span>
                        </div>
                        <div class="btn_r"></div>
                    </div>
                </div>
            </div>
            <div class="detail">
                <div class="btns">
                    <a class="play" title="播放">
                        <i class="play_l" @click="playprogram">
                            <span>播放{{ min(program) }}分{{ sec(program) }}秒</span>
                        </i>
                        <i class="play_r"></i>
                    </a>
                    <a class="zan" title="赞">
                        <i class="good"></i>
                        <i class="zan_l">
                            <span>({{ program.likedCount || '赞' }})</span>
                        </i>
                        <i class="zan_r"></i>
                    </a>
                    <a class="com" title="评论" @click="viewClick()">
                        <i class="com_l">
                            <span>({{ program.commentCount || '评论' }})</span>
                        </i>
                        <i class="com_r"></i>
                    </a>
                    <a class="share" title="分享">
                        <i class="share_l">
                            <span>({{ program.shareCount || '分享' }})</span>
                        </i>
                        <i class="share_r"></i>
                    </a>
                    <a class="load">
                        <i class="load_l">
                            <span>下载</span>
                        </i>
                        <i class="load_r"></i>
                    </a>
                </div>
                <div class="sub">
                    <a class="cat">{{ radio.category }}</a>
                    <strong>{{ radio.name }}</strong>
                    <strong>第{{ radio.programCount }}期</strong>
                    <span>{{ program.createTime | showDate }} 创建</span>
                    <span>播放：<em>{{ program.listenerCount }}</em>次</span>
                </div>
            </div>
            <div class="des">
                <p :class="{'clamp':!isExp}">介绍：{{ program.description }}</p>
                <a v-show="!isExp" @click="isExp=!isExp">展开<i class="exp"></i></a>
                <a v-show="isExp" @click="isExp=!isExp">收齐<i class="col"></i></a>
            </div>
        </div>
        <!-- 歌单列表 -->
        <div class="detail_b" v-show="songs.length==0?false:true">
            <div class="total">
                <div class="total_l">
                    <strong>节目包含歌曲</strong>
                    <span>({{ songs.length }}首歌曲)</span>
                </div>
                <div class="total_r">
                    <a v-show="!isShow" @click="isShow=!isShow">展开<i class="exp"></i></a>
                    <a v-show="isShow" @click="isShow=!isShow">收齐<i class="col"></i></a>
                </div>
            </div>
            <table v-show="isShow" >
                <tr v-for="(item, index) in songs" :key="index">
                    <td class="col1">
                        <div class="hd">
                            <span class="num">{{ index + 1 }}</span>
                            <i class="play" @click="playmusic(index)" v-show="!item.starred"></i>
                            <i class="active" v-show="item.starred"></i>
                        </div>
                    </td>
                    <td class="col2">
                        <div class="txt">
                            <p class="ellipsis" @click="$router.push(`/songlist/${item.id}`)" :title="item.name">
                                {{ item.name }}
                                <span v-for="(item1, index) in item.alias" :key="index">-{{ item1 }}</span>
                            </p>
                            <i class="mv" v-show="item.mvid==0?false:true" @click="$router.push(`/mvlist/${item.mvid}`)"></i>
                        </div>
                    </td>
                    <td class="col3">
                        <span class="time">{{ min(item) }}:{{ sec(item) }}</span>
                        <div class="show">
                          <a title="添加到播放列表" class="a1"></a>
                          <a title="收藏" class="a2"></a>
                          <a title="分享" class="a3"></a>
                          <a title="下载" class="a4"></a>
                        </div>
                    </td>
                    <td class="col4">
                        <div class="text ellipsis">
                            <a class="name" v-for="item2 in item.artists" :key="item2.id" @click="$router.push(`/artlist/${item2.id}`)" :title="item2.name">{{ item2.name }}<em>/</em></a>
                        </div>
                    </td>
                    <td class="col5">
                        <div class="text ellipsis">
                            <a class="title" @click="$router.push(`/albumlist/${item.album.id}`)" :title="item.album.name">{{ item.album.name }}</a>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 歌单评论 -->
        <div class="comment_title" id="view">
            <h2>评论</h2>
            <span>共{{ commentCount }}条评论</span>
        </div>
        <div class="comment">
            <div class="com_l">
                <img src="http://p1.music.126.net/B8zVoyFfiBy6hnrLy3KTWg==/109951167913480051.jpg?param=200y200" alt="" v-if="$store.state.isHeader">
                <img src="http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50" alt="" v-else>
            </div>
            <div class="com_r">
                <textarea name="" id="" placeholder="评论" v-model="content"></textarea>
                <div class="btns">
                    <div><i class="smile"></i><i class="alt"></i></div>
                    <div><span class="count">{{contentMaxLength - content.length}}</span><a @click="viewBtn">评论</a></div>
                </div>
            </div>
        </div>
        <div class="comment_list">
            <h3 v-show="hotComments.length==0?false:true">精彩评论</h3>
            <ul>
                <li v-for="(item, index) in hotComments" :key="index">
                    <img :src="item.user.avatarUrl" alt="">
                    <div class="cnt">
                        <div class="cnt_t">
                            <p class="text">
                                <span class="name" @click="$router.push(`/user/${item.user.userId}`)">
                                    {{ item.user.nickname }}:
                                </span>
                                {{ item.content }}
                            </p>
                        </div>
                        <div class="cnt_c" v-for="(item1, index) in item.beReplied" :key="index">
                            <p class="text" >
                                <span class="name" @click="$router.push(`/user/${item1.user.userId}`)">
                                    {{ item1.user.nickname }}:
                                </span>
                                {{ item1.content }}
                            </p>
                        </div>
                        <div class="cnt_b">
                            <span class="time">{{ item.time | showDate }}</span>
                            <span class="zan">
                                <i class="good" v-show="!item.liked" @click="likeFn(item)"></i>
                                <i class="like" v-show="item.liked" @click="unlikeFn(item)"></i>
                                <i class="count">({{ item.likedCount }})</i>
                                <i class="sep">|</i>
                                <i class="view" @click="replyFn(item)">回复</i>
                            </span>
                        </div>
                        <!-- 回复区域 -->
                        <div class="reply" v-show="item.owner">
                            <textarea v-model="recontent" ></textarea>
                            <div class="btns">
                                <div><i class="smile"></i><i class="alt"></i></div>
                                <div><span class="count">{{contentMaxLength - recontent.length}}</span><a @click="replyBtn(item)">回复</a></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <h3 v-show="comments.length==0?false:true">最新评论</h3>
            <ul>
                <li v-for="(item, index) in comments" :key="index">
                    <img :src="item.user.avatarUrl" alt="">
                    <div class="cnt">
                        <div class="cnt_t">
                            <p class="text">
                                <span class="name" @click="$router.push(`/user/${item.user.userId}`)">
                                    {{ item.user.nickname }}:
                                </span>
                                {{ item.content }}
                            </p>
                        </div>
                        <div class="cnt_c" v-for="(item1, index) in item.beReplied" :key="index">
                            <p class="text" >
                                <span class="name" @click="$router.push(`/user/${item1.user.userId}`)">
                                    {{ item1.user.nickname }}:
                                </span>
                                {{ item1.content }}
                            </p>
                        </div>
                        <div class="cnt_b">
                            <span class="time">{{ item.timeStr }}</span>
                            <span class="zan">
                                <i class="good" v-show="!item.liked" @click="likeFn(item)"></i>
                                <i class="like" v-show="item.liked" @click="unlikeFn(item)"></i>
                                <i class="count">({{ item.likedCount }})</i>
                                <i class="sep">|</i>
                                <i class="view" @click="replyFn(item)">回复</i>
                            </span>
                        </div>
                        <!-- 回复区域 -->
                        <div class="reply" v-show="item.owner">
                            <textarea placeholder="回复" v-model="recontent"></textarea>
                            <div class="btns">
                                <div><i class="smile"></i><i class="alt"></i></div>
                                <div><span class="count">{{contentMaxLength - recontent.length}}</span><a @click="replyBtn(item)">回复</a></div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
    </div>
</template>

<script>
import { ProgramDetailApi, ProgramCommentApi, DetailViewApi, DetailLikeApi } from "@/request/api";
import { formatDate } from '@/assets/utils/date';
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            program: [],
            dj: [],
            radio: [],
            songs: [],
            name: "",
            isExp: false,
            isPlay: false,
            isShow: true,
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
            commentCount: 0,
            hotComments: [],
            comments: [],
            content: "",
            recontent: "",
            contentMaxLength: 140,
        }
    },
    components: {
        MusicPlay,
    },
    filters: {
        showDate: function(value) {
            let date = new Date(value);
            // return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            return formatDate(date, 'yyyy-MM-dd');
        }
    },
    computed: {
        id() {
            return this.$route.params.id;
        },
    },
    created() {
        // 获取电台节目详情
        ProgramDetailApi(this.id).then((res) => {
            // console.log(res);
            this.program = res.data.program;
            this.dj = res.data.program.dj;
            this.songs = res.data.program.songs.filter(item=>{
                return item.album != null
            });
            this.radio = res.data.program.radio;
        });
        // 获取电台节目评论
        ProgramCommentApi(this.id).then((res) => {
            // console.log(res);
            this.commentCount = res.data.total;
            this.hotComments = res.data.hotComments;
            this.comments = res.data.comments;
        });
    },
    methods: {
        viewClick() {
          document.querySelector('#view').scrollIntoView({
            behavior: "auto",
            block: "center",
            inline: "nearest"
          })
        },
        min(item) {
          if (parseInt(item.duration / 60000) < 10)
          return "0" + parseInt(item.duration / 60000);
          else return parseInt(item.duration / 60000);
        },
        sec(item) {
          let x = parseInt(item.duration / 60000);
          let y = parseInt(item.duration / 1000 - x * 60);
          if (y < 10) return "0" + y;
          else return y;
        },
        playprogram() {
            this.songs.forEach(item=>item.starred=false);
            this.ids = this.program.mainTrackId;
            this.imgUrl = this.program.coverUrl;
            this.isPlay = true;
        },
        playmusic(index) {
            this.songs.forEach(item=>item.starred=false);
            this.songs[index].starred = true;
            this.ids = this.songs[index].id;
            this.imgUrl = this.songs[index].album.picUrl;
            this.isPlay = true;
        },
        // 评论
        viewBtn() {
          if(this.content.length === 0){
            let obj = { content: "请输入点内容再提交!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if(this.content.length <= this.contentMaxLength) {
            DetailViewApi({
              t: 1,
              type: 4,
              id: this.id,
              content: this.content,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                // 检验评论成功
                let obj = { content: "评论成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                // 检验发送失败
                let obj = { content: "评论失败!", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            this.content = "";
            this.commentCount = this.commentCount + 1;
            this.program.commentCount  = this.program.commentCount + 1;
          }else{
            let obj = { content: "输入不能超过140字符!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 点赞
        likeFn(item) {
          if(item.liked === false){
            DetailLikeApi({
              t: 1,
              type: 4,
              id: this.id,
              cid: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                let obj = { content: "点赞成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                let obj = { content: "点赞失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.liked = true;
            item.likedCount = item.likedCount + 1;
          }else{
            let obj = { content: "已点赞！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 取消点赞
        unlikeFn(item) {
          if(item.liked === true){
            DetailLikeApi({
              t: 0,
              type: 4,
              id: this.id,
              cid: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                let obj = { content: "取消点赞成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                let obj = { content: "取消点赞失败！", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.liked = false;
            item.likedCount = item.likedCount - 1;
          }else{
            let obj = { content: "已取消点赞！", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
        // 回复
        replyFn(item) {
          if(item.owner === false){
            this.hotComments.forEach(item=>item.owner=false);
            this.comments.forEach(item=>item.owner=false);
            item.owner = true;
            this.recontent = '回复'+item.user.nickname+':';
          }else{
            item.owner = false;
          }
        },
        // 回复评论
        replyBtn(item) {
          // console.log(item.user.nickname.length+3);
          if(this.recontent.length === item.user.nickname.length+3){
            let obj = { content: "请输入点内容再提交!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }else if(this.recontent.length <= this.contentMaxLength){
            DetailViewApi({
              t: 2,
              type: 4,
              id: this.id,
              content: this.recontent,
              commentId: item.commentId,
            }).then((res) => {
              // console.log(res);
              if(res.data.code === 302){
                // 检验回复成功
                let obj = { content: "回复成功!", icon: "success" };
                this.$store.dispatch("AsyncToast", obj);
              }else{
                // 检验回复失败
                let obj = { content: "回复失败!", icon: "danger" };
                this.$store.dispatch("AsyncToast", obj);
              }
            })
            item.owner = false;
          }else{
            let obj = { content: "输入不能超过140字符!", icon: "danger" };
            this.$store.dispatch("AsyncToast", obj);
          }
        },
    },
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base";
.detail_l {
    width: 640px;
    background-color: #fff;
    border-left: 1px solid #D7D7D7;
    padding: 40px;
    .detail_t {
        width: 640px;
        margin-bottom: 20px;
        .cnt {
            display: flex;
            margin-bottom: 20px;
            .header {
                position: relative;
                width: 208px;
                height: 208px;
                img {
                    width: 208px;
                    height: 208px;
                }
                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 208px;
                    height: 208px;
                    display: block;
                    background: url("../../assets/images/public/coverall.png") no-repeat 0 -1285px;
                }
            }
            .info {
                margin-left: 20px;
                margin-top: 20px;
                .title {
                    width: 400px;
                    margin-bottom: 20px;
                    display: flex;
                    .program {
                        width: 73px;
                        height: 24px;
                        display: block;
                        float: left;
                        margin-right: 10px;
                        background: url("../../assets/images/public/icon2.png") no-repeat 0 -75px;
                    }
                    h2 {
                        width: 79%;
                        line-height: 24px;
                        font-size: 20px;
                        color: #333;
                    }
                }
                .name {
                    width: 400px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20px;
                    .icon {
                        width: 16px;
                        height: 17px;
                        display: inline-block;
                        margin-right: 10px;
                        background: url("../../assets/images/public/icon2.png") no-repeat -50px -20px;
                    }
                    span {
                        width: 93%;
                        line-height: 26px;
                        font-size: 16px;
                        color: #666;
                    }
                }
                .btn {
                    display: flex;
                    span {
                        font-size: 12px;
                        color: #333;
                        line-height: 31px;
                        padding: 0 0 0 30px;
                    }
                    .btn_l {
                        width: 120px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -2207px;
                    }
                    .btn_r {
                        width: 10px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -240px -2247px;
                    }
                    &:hover {
                        cursor: pointer;
                        .btn_l {
                            width: 120px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -2599px;
                        }
                        .btn_r {
                            width: 10px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -240px -2640px;
                        }
                    }
                }

            }
        }
        .detail {
            .btns {
                height: 31px;
                display: flex;
                margin-bottom: 20px;
                a {
                    margin-right: 10px;
                    span {
                        font-size: 12px;
                        color: #333;
                        line-height: 31px;
                        padding: 0 0 0 30px;
                    }
                }
                .play {
                    display: flex;
                    span {
                        font-size: 12px;
                        color: #fff;
                        line-height: 31px;
                        padding: 0 7px 0 35px;
                    }
                    .play_l {
                        // width: 65px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -633px;
                    }
                    .play_r {
                        width: 6px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -244px -676px;
                    }
                    &:hover {
                        cursor: pointer;
                        .play_l {
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -719px;
                        }
                        .play_r {
                            width: 6px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -244px -762px;
                        }
                    }
                    
                }
                .zan {
                    display: flex;
                    position: relative;
                    .good {
                        position: absolute;
                        top: 7px;
                        left: 7px;
                        width: 17px;
                        height: 15px;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -95px;
                    }
                    .zan_l {
                        padding-right: 2px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -59px;
                    }
                    .zan_r {
                        width: 5px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -245px -100px;
                    }
                    &:hover {
                        cursor: pointer;
                        span {
                            color: #666;
                        }
                        .zan_l {
                            padding-right: 2px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -141px;
                        }
                        .zan_r {
                            width: 5px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -245px -182px;
                        }
                    }
                }
                .com {
                    display: flex;
                    .com_l {
                        padding-right: 2px;
                        height: 31px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -1465px;
                    }
                    .com_r {
                        width: 5px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -245px -100px;
                    }
                    &:hover {
                        cursor: pointer;
                        span {
                            color: #666;
                        }
                        .com_l {
                            padding-right: 2px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -1508px;
                        }
                        .com_r {
                            width: 5px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -245px -182px;
                        }
                    }
                }
                .share {
                    display: flex;
                    .share_l {
                        padding-right: 2px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -1225px;
                    }
                    .share_r {
                        width: 5px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -245px -100px;
                    }
                    &:hover {
                        cursor: pointer;
                        span {
                            color: #666;
                        }
                        .share_l {
                            padding-right: 2px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -1268px;
                        }
                        .share_r {
                            width: 5px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -245px -182px;
                        }
                    }
                }
                .load {
                    display: flex;
                    .load_l {
                        width: 60px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: 0 -2761px;
                    }
                    .load_r {
                        width: 5px;
                        height: 31px;
                        display: block;
                        background: url("../../assets/images/public/button2.png") no-repeat;
                        background-position: -245px -100px;
                    }
                    &:hover {
                        cursor: pointer;
                        span {
                            color: #666;
                        }
                        .load_l {
                            width: 60px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: 0 -2805px;
                        }
                        .load_r {
                            width: 5px;
                            height: 31px;
                            display: block;
                            background: url("../../assets/images/public/button2.png") no-repeat;
                            background-position: -245px -182px;
                        }
                    }
                }
            }
            .sub {
                width: 640px;
                height: 35px;
                display: flex;
                align-items: center;
                a {
                    font-size: 12px;
                    color: #cc0000;
                    border: 1px solid #cc0000;
                    line-height: 16px;
                    padding: 0 6px;
                    vertical-align: middle;
                }
                strong {
                    font-size: 14px;
                    color: #333;
                    font-weight: bold;
                    margin-left: 10px;
                }
                span {
                    font-size: 12px;
                    color: #999;
                    margin-left: 20px;
                    em {
                        color: #c20c0c;
                        font-weight: bold;
                    }
                }
            }
        }
        .des {
            width: 640px;
            p {
                white-space: pre-wrap;
                font-size: 12px;
                line-height: 23px;
                color: #666;
            }
            .clamp {
                overflow:hidden; 
                text-overflow:ellipsis; 
                display:-webkit-box; 
                -webkit-box-orient:vertical; 
                -webkit-line-clamp:5;
            }
            a {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 12px;
                color: #0C73C2;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
                .exp {
                    width: 12px;
                    height: 8px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png")    no-repeat -65px -520px;
                }
                .col {
                    width: 12px;
                    height: 8px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png")    no-repeat -45px -520px;
                }
            }
        }
    }
    .detail_b {
        margin-bottom: 20px;
        .total {
            padding: 0 10px;
            width: 620px;
            line-height: 33px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f7f7f7;
            border: 1px solid #d9d9d9;
            .total_l {
                strong {
                    font-size: 12px;
                    color: #333;
                    font-weight: bold;
                }
                span {
                    font-size: 12px;
                    color: #666;
                    padding: 0 0 0 5px;
                }
            }
            .total_r {
                display: flex;
                align-items: center;
                cursor: pointer;
                a {
                    line-height: 33px;
                    font-size: 12px;
                    color: #666;
                    &:hover {
                        text-decoration: underline;
                    }
                }
                .exp {
                    margin: 0 0 0 5px;
                    width: 10px;
                    height: 5px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon2.png") no-repeat -75px -20px;
                }
                .col {
                    margin: 0 0 0 5px;
                    width: 10px;
                    height: 5px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon2.png") no-repeat -75px -29px;
                }
            }
        }
        table {
            border: 1px solid #d9d9d9;
            border-top: 0;
            tr {
                width: 640px;
                display: flex;
                &:nth-of-type(even) {
                    background: #f7f7f7;
                }
                &:nth-of-type(odd) {
                    background: #fff;
                }
                &:hover .time {
                    display: none !important;
                }
                &:hover .show {
                    display: block !important;
                }
                td {
                    display: flex;
                    font-size: 12px;
                    height: 18px;
                    line-height: 18px;
                    padding: 6px 10px;
                }
                .col1 {
                    .hd {
                        display: flex;
                        justify-content: space-between;
                        width: 54px;
                        .num {
                            font-size: 12px;
                            color: #999;
                        }
                        .play {
                            width: 17px;
                            height: 17px;
                            display: inline-block;
                            background: url("@/assets/images/public/table.png") no-repeat;
                            background-position: 0 -103px;
                            &:hover {
                                cursor: pointer;
                                background-position: 0 -128px;
                            }
                        }
                        .active {
                            width: 17px;
                            height: 17px;
                            display: inline-block;
                            background: url("../../assets/images/public/table.png") no-repeat -20px -128px;
                        }
                    }
                }
                .col2 {
                    .txt {
                        display: flex;
                        width: 240px;
                        p {
                            font-size: 12px;
                            color: #333;
                            width: 200px;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                            }
                            span {
                                font-size: 12px;
                                color: #aeaeae;
                            }
                        }
                        .mv {
                            margin: 0 0 0 5px;
                            width: 23px;
                            height: 17px;
                            display: inline-block;
                            background: url("@/assets/images/public/table.png") no-repeat 0 -151px;
                            &:hover {
                                cursor: pointer;
                                width: 23px;
                                height: 17px;
                                display: block;
                                background: url("@/assets/images/public/table.png") no-repeat -30px -151px;
                            }
                        }
                    }
                }
                .col3 {
                    .time {
                        width: 75px;
                        font-size: 12px;
                        color: #666;
                    }
                    .show {
                      width: 75px;
                      height: 18px;
                      display: none;
                      a {
                        margin: 2px 2px 0 0;
                        width: 18px;
                        height: 16px;
                        display: block;
                        float: left;
                        background: url("../../assets/images/public/table.png") no-repeat;
                        &:hover {
                          cursor: pointer;
                        }
                      }
                      .a1 {
                        width: 13px;
                        height: 13px;
                        margin-top: 2px;
                        background: url("../../assets/images/public/icon.png") no-repeat;
                        background-position: 0 -700px;
                    
                        &:hover {
                          background-position: -22px -700px;
                        }
                      }
                      .a2 {
                        background-position: 0 -174px;
                        &:hover {
                          background-position: -20px -174px;
                        }
                      }
                      .a3 {
                        background-position: 0 -195px;
                        &:hover {
                          background-position: -20px -195px;
                        }
                      }
                      .a4 {
                        background-position: -81px -174px;
                        &:hover {
                          background-position: -104px -174px;
                        }
                      }
                    }
                    
                }
                .col4 {
                    .text {
                        width: 70px;
                        a {
                            font-size: 12px;
                            color: #333;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                            }
                            &:last-of-type {
                                em {
                                    display: none;
                                }
                            }
                        }
                    }
                }
                .col5 {
                    .text {
                        width: 107px;
                        font-size: 12px;
                        color: #333;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                        }
                    }
                }
            }
            
        }
    }
    .comment_title {
        height: 40px;
        width: 640px;
        border-bottom: 2px solid @red;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        h2 {
            font-size: 20px;
            color: #333;
            &:hover {
                cursor: pointer;
                text-decoration: underline;
            }
        }
        span {
            font-size: 12px;
            color: #666;
            margin: 9px 0 0 20px;
        }
    }
    .comment {
        display: flex;
        font-size: 12px;
        .com_l {
            height: 100px;
            margin-right: 10px;
            img {
                width: 50px;
                height: 50px;
            }
        }
        .com_r {
            height: 100px;
            textarea {
                resize:none;
                width: 565px;
                height: 50px;
                padding: 5px 6px 6px;
                border: 1px solid #cdcdcd;
                border-radius: 2px;
                line-height: 19px;
                box-sizing: content-box;
            }
            .btns {
                padding: 10px 0 0;
                display: flex;
                justify-content: space-between;
                .smile {
                    cursor: pointer;
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png") no-repeat;
                    background-position: -40px -490px;
                    margin-right: 10px;
                }
                .alt {
                    cursor: pointer;
                    width: 18px;
                    height: 18px;
                    display: inline-block;
                    background: url("@/assets/images/public/icon.png") no-repeat;
                    background-position: -60px -490px;
                }
                .count {
                    font-size: 12px;
                    color: #999;
                    margin-right: 10px;
                }
                a {
                    width: 46px;
                    height: 25px;
                    display: inline-block;
                    background: url("@/assets/images/public/button.png") no-repeat;
                    background-position: -84px -64px;
                    color: #fff;
                    text-align: center;
                    line-height: 25px;
                    &:hover {
                        cursor: pointer;
                        background-position: -84px -94px;
                    }
                }
            }
        }
    }
    .comment_list {
        h3 {
            height: 20px;
            width: 640px;
            font-weight: bolder;
            font-size: 12px;
            color: #333;
            border-bottom: 1px solid #ccc;
            display: flex;
            align-items: center;
            margin-top: 20px;
        }
        ul {
            li {
                width: 640px;
                padding: 15px 0;
                display: flex;
                border-bottom: 1px dotted #999;
                &:last-child {
                    border: 0;
                }
                img {
                    cursor: pointer;
                    width: 50px;
                    height: 50px;
                }
                .cnt {
                    font-size: 12px;
                    margin-left: 10px;
                }
                .cnt_t {
                    width: 580px;
                    display: flex;
                    align-items: center;
                    .name {
                        line-height: 20px;
                        color: #0C73C2;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                            color: #0C73C2;
                        }
                    }
                    .text {
                        line-height: 20px;
                        color: #333;
                    }
                }
                .cnt_c {
                    width: 540px;
                    padding: 8px 20px;
                    margin-top: 10px;
                    line-height: 20px;
                    background: #f4f4f4;
                    border: 1px solid #dedede;
                    display: flex;
                    align-items: center;
                    .name {
                        line-height: 20px;
                        color: #0C73C2;
                        &:hover {
                            cursor: pointer;
                            text-decoration: underline;
                            color: #0C73C2;
                        }
                    }
                    .text {
                        line-height: 20px;
                        color: #333;
                    }
                }
                .cnt_b {
                    widows: 580px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin: 15px 0;
                    .time {
                        color: #999;
                    }
                    .zan {
                        .good {
                            width: 15px;
                            height: 14px;
                            display: inline-block;
                            background: url("@/assets/images/public/icon2.png") no-repeat;
                            background-position: -150px 0;
                            &:hover {
                                cursor: pointer;
                                background-position: -150px -20px;
                            }
                        }
                        .like {
                            width: 15px;
                            height: 14px;
                            display: inline-block;
                            background: url("@/assets/images/public/icon2.png") no-repeat;
                            background-position: -170px 0;
                        }
                        .count {
                            margin-left: 8px;
                            color: #333;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                                color: #333;
                            }
                        }
                        .sep {
                            margin: 0 8px;
                            color: #ccc;
                        }
                        .view {
                            color: #666;
                            &:hover {
                                cursor: pointer;
                                text-decoration: underline;
                                color: #666;
                            }
                        }
                    }
                }
                .reply {
                  width: 550px;
                  padding: 15px;
                  background: #f8f8f8;
                  border: 1px solid #dedede;
                  border-radius: 2px;
                  box-sizing: content-box;
                  textarea {
                    resize:none;
                    width: 540px;
                    height: 20px;
                    padding: 5px 6px 6px;
                    border: 1px solid #cdcdcd;
                    border-radius: 2px;
                    line-height: 20px;
                    text-align: start;
                  }
                  .btns {
                      padding: 10px 0 0;
                      display: flex;
                      justify-content: space-between;
                      .smile {
                          cursor: pointer;
                          width: 18px;
                          height: 18px;
                          display: inline-block;
                          background: url("@/assets/images/public/icon.png") no-repeat;
                          background-position: -40px -490px;
                          margin-right: 10px;
                      }
                      .alt {
                          cursor: pointer;
                          width: 18px;
                          height: 18px;
                          display: inline-block;
                          background: url("@/assets/images/public/icon.png") no-repeat;
                          background-position: -60px -490px;
                      }
                      .count {
                          font-size: 12px;
                          color: #999;
                          margin-right: 10px;
                      }
                      a {
                          width: 46px;
                          height: 25px;
                          display: inline-block;
                          background: url("@/assets/images/public/button.png") no-repeat;
                          background-position: -84px -64px;
                          color: #fff;
                          text-align: center;
                          line-height: 25px;
                          &:hover {
                              cursor: pointer;
                              background-position: -84px -94px;
                          }
                      }
                  }
                }
            }
        }
    }
}
</style>